<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-position: center;
        background-size: cover;
        transition:  0.5s;
      }
      body::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(9, 9, 9, 0.7);
        z-index: -1;
      }

      button {
        height: 50px;
        line-height: 10px;
        border-style: none;
       
        z-index: 1;
        position: fixed;
        background-color: transparent;
        padding: 20px;
        font-size: 30px;
        color: red;
        /* border: 1px solid black; */
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
      .right{
        right: calc(15vw - 72px);
      }
      .left{
        left: calc(15vw - 72px);
      }
      .container {
        width: 70vw;
        height: 70vh;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
       
      }

      .slide {
        width: 100vw;
        height: 100vh;
        background-position: center;
        background-size: cover;
        position: absolute;
        left: -15vw;
        top: -15vh;
        opacity: 0;
        transition:0.5s ;
      }
      .active{
        opacity: 1;
      }
      ul{
        position: fixed;
        bottom: 16vh;
        display: flex;
        
      }
      li{
        list-style: none;
        width: 20px;
        height: 20px;
        background-color: rgba(9, 9, 9, 0.8);
        border-radius: 10px;
        margin: 5px;
        
        cursor: pointer;
      }
      .activeBackground{
        
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div
        class="slide active"
        style="background-image: url(https://n.sinaimg.cn/sinacn10101/600/w1920h1080/20190720/1203-iaantfh5145806.jpg)"
      ></div>
      <div
        class="slide"
        style="background-image: url(https://lmg.jj20.com/up/allimg/4k/s/01/210924113P33108-0-lp.jpg)"
      ></div>
      <div
        class="slide"
        style="background-image: url(https://up.enterdesk.com/edpic_source/30/9f/fe/309ffef7c3f63499d7ad8b8c241bec2a.jpg)"
      ></div>
      <div
        class="slide"
        style="background-image: url(https://img2.baidu.com/it/u=1931440065,3381828890&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800)"
      ></div>
      <div
        class="slide"
        style="background-image: url(https://10wallpaper.com/wallpaper/2560x1600/1610/River_under_the_bridge-Cities_Corner_HD_Wallpaper_2560x1600.jpg)"
      ></div>
      <button class="left">←</button>
      <button class="right">→</button>
    </div>
    <ul>
      <li class="activeBackground"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <script>
      const leftBtn = document.querySelector('.left');
      const rightBtn = document.querySelector('.right');
      const Slide=document.querySelectorAll('.slide')
      const lis = document.querySelectorAll('li')

      const bodyEle = document.body
      let activeIndex=0 //当前索引
      let times =null
      //定时器
      timesStart()
      function timesStart(){
         times= setInterval(()=>{
        moveNext ()
      },1200)
      }
      function timesStop(){
        clearInterval(times)
          setTimeout( ()=>{
            timesStart()
          },2000)
      }
     

      //li循环绑定事件
      lis.forEach((ele,index)=>{
        ele.onclick=function(){
         
          activeIndex=index
          setActiveSlide()
          setActivebody()
          
          timesStop()
        }
      })

      //body根据盒子的背景图片 添加背景图片
      setActivebody()
      function setActivebody(){
        bodyEle.style.backgroundImage=Slide[activeIndex].style.backgroundImage
      }
      //盒子里面根据索引 切换下一张
      setActiveSlide()
      function setActiveSlide(){
        Slide.forEach(ele=>ele.classList.remove('active'))
        Slide[activeIndex].classList.add('active')

        //li也显示颜色
        
        lis.forEach(ele=>ele.classList.remove('activeBackground'))
        lis[activeIndex].classList.add('activeBackground')
      }



      rightBtn.onclick=moveNext//点击下一张
      function moveNext (){
        activeIndex++
        if(activeIndex==Slide.length) activeIndex=0 //清除边界
        setActiveSlide()
        setActivebody()

        // timesStop()
        
      }
      leftBtn.onclick=movelast//点击上一张
      function movelast (){
        activeIndex--
        if(activeIndex<=0) activeIndex=Slide.length-1 //清除边界
        setActiveSlide()
        setActivebody()

      //  timesStop()
      }
    </script>
  </body>
</html>
